<template>
    <div>
        <HeaderNav class="header-box" @cancel="$router.go(-1)"></HeaderNav>
        <div id="container">
            <div class="left">
                <ul>
                    <li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li v-for="(item,index) in rightList" :style="{marginTop:index === 2 ? '90px': '0'}" :key="'right' + index" :id="item.nodeId" name="target">
                        {{item.name}}
                    </li>
                </ul>
            </div>
        </div>
        <div id="item_left" class="item" style="margin-left: 300px"></div>
        <div id="item_right" class="item" style="margin-top: 100px"></div>
    </div>
</template>
<script>
  import HeaderNav from '@/components/HeaderNav.vue';
  export default {
    name: "demo",
    components:{
      HeaderNav
    },
    data() {
      return {
        jsPlumb: null,// 缓存实例化的jsplumb对象
        leftList: [
          {name: 'xxx_left_1', nodeId: 'left_1'},
          {name: 'xxx_left_2', nodeId: 'left_2'},
          {name: 'xxx_left_3', nodeId: 'left_3'},
          {name: 'xxx_left_4', nodeId: 'left_4'},
        ],
        rightList: [
          {name: 'xxx_right_1', nodeId: 'right_1'},
          {name: 'xxx_right_2', nodeId: 'right_2'},
          {name: 'xxx_right_3', nodeId: 'right_3'},
          {name: 'xxx_right_4', nodeId: 'right_4'}
        ]
      }
    },
    mounted() {
      // this.showPlumb();
      this.$jsPlumb.connect({
        source: 'item_right',
        target: 'item_left',
        endpoint: 'Blank',
        connector: ['Bezier'],
        EndpointStyle: {radius: 10, fill: '#999'},// 端点样式
        PaintStyle: {stroke: '#999', strokeWidth: 1},// 绘画样式，默认8px线宽 #456
        HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 1},// 默认悬停样式 默认为null
        anchor: ['Left', 'Right'],
        overlays:[
          "Arrow",
          [ "Label", { label:"大于100时", location:0.25,width: 6,  length: 3, id:"myLabel" } ]
        ],
        DrapOptions: {cursor: 'crosshair', zIndex: 2000}
      })

      // this.$jsPlumb.draggable('item_left')
      // this.$jsPlumb.draggable('item_right')
    },
    methods: {
      showPlumb() {
        this.jsPlumb = this.$jsPlumb.getInstance({
          Container: 'container', // 选择器id
          EndpointStyle: {radius: 0.11, fill: '#999'},// 端点样式
          PaintStyle: {stroke: '#999', strokeWidth: 1},// 绘画样式，默认8px线宽 #456
          HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 1},// 默认悬停样式 默认为null
          ConnectionOverlays: [// 此处可以设置所有箭头的样式
            ['PlainArrow', {// 设置参数可以参考中⽂⽂档
              location: 1,
              width: 6,
              length: 3,
              painStyle: {
                stroke: '#ebeef5',
                fill: '#ebeef5'
              }
            }],
          ],
          Connector: ["Bezier", {curviness: 63}],// 要使⽤的默认连接器的类型：直线，折线，曲线等
          DrapOptions: {cursor: 'crosshair', zIndex: 2000}
        });
        this.jsPlumb.batch(() => {
          for (let i = 0; i < this.leftList.length; i++) {
            this.initLeaf(this.leftList[i].nodeId, 'source');
          }
          for (let j = 0; j < this.rightList.length; j++) {
            this.initLeaf(this.rightList[j].nodeId, 'target')
          }
        });

        this.setjsPlumb(true, true);

        //点击连线
        this.jsPlumb.bind('click', (conn, originalEvent) => {
          console.log(conn, originalEvent)
        });

        //连线时触发
        this.jsPlumb.bind('connection', (conn, originalEvent) => {
          console.log(conn.sourceId);
          console.log(conn.targetId);
        });

        //右键触发
        this.jsPlumb.bind('contextmenu', (conn, originalEvent) => {
          console.log(conn, originalEvent)
        })
      },
      // 初始化规则使其可以连线、拖拽
      initLeaf(id, type) {
        const ins = this.jsPlumb;
        const elem = document.getElementById(id);
        if (type === 'source') {
          ins.makeSource(elem, {
            anchor: [1, 0.5, 0, 0],// 左 上 右 下
            allowLoopback: false,//允许回连
            maxConnections: -1//最⼤连接数（-1表⽰不限制）
          })
        } else {
          ins.makeTarget(elem, {
            anchor: [0, 0.5, 0, 0],
            allowLoopback: false,
            maxConnections: -1
          })
        }
      },
      setjsPlumb(sourceFlag, targetFlag) {
        const source = document.getElementsByName('source');
        const target = document.getElementsByName('target')
        this.jsPlumb.setSourceEnabled(source, sourceFlag);
        this.jsPlumb.setTargetEnabled(target, targetFlag);
        this.jsPlumb.setDraggable(source, true);// 是否⽀持拖拽
        this.jsPlumb.setDraggable(target, true);// 是否⽀持拖拽
      }
    }
  }
</script>
<style>
    .item{
        width: 50px;
        height: 50px;
        border: 1px solid #1890ff;
    }

    #container {
        width: 500px;
        height: 500px;
        padding: 20px;
        position: relative; /*⼀定加上这句，否则连线位置发⽣错乱*/
    }

    .left {
        float: left;
        width: 150px;
    }

    .right {
        float: right;
        width: 150px;
    }

    .left li, .right li {
        width: 100%;
        border-radius: 4px;
        border: 1px solid #ccc;
        background: #efefef;
        margin-bottom: 20px;
        padding: 8px 5px;
    }
</style>
